<template>
  <h2>首页</h2>
  <p v-if="isShow">当前计数：{{ count }}</p>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
  <button @click="increment">count 自增</button>
  <button @click="toggleIsShow">切换显示/隐藏</button>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const count = ref(0)
const isShow = ref(true)
const list = ref(['Vue指令', 'ref响应式', '路由跳转'])

const increment = () => {
  count.value++
}

const toggleIsShow = () => {
  isShow.value = !isShow.value
}

// onMounted 生命周期：页面挂载完成后执行
onMounted(() => {
  console.log('页面挂载完成')
})

// watch 监听 count 变化
watch(count, (newVal, oldVal) => {
  console.log(`计数变化：旧值-${oldVal}, 新值-${newVal}`)
})
</script>

<style scoped>
</style>